import React from 'react';
import WeaPortalRcTabs from '../wea-portal-rc-tabs';

const { Tabs, TabPane, TabContent, ScrollableInkTabBar } = WeaPortalRcTabs;

class WeaPortalElementTabs extends React.Component {
  render() {
    const { config = {}, tabs = [], activeKey, className = '', withTitleContainer = true, selfAdaption = true, tabWidth = 76, showOne = false } = this.props;
    const { item = {} } = config;
    const { eid, fontStyle = {} } = item;

    if (showOne || (tabs && tabs.length > 1)) {
      let style = { width: 'auto', height: '32px', lineHeight: '32px', padding: '0 10px', backgroundSize: '100% 100%' };
      if (!selfAdaption) {
        style = { width: parseInt(tabWidth), overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' };
      }
      const _Tabs = (
        <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@go0wqo`} activeKey={activeKey} className={`tabcontainer tab2 ${className}`} onChange={this.onChange} renderTabBar={() => <ScrollableInkTabBar ecId={`${this && this.props && this.props.ecId || ''}_ScrollableInkTabBar@bayqqv`} />} renderTabContent={() => <TabContent ecId={`${this && this.props && this.props.ecId || ''}_TabContent@w5s0y7`} />}>
          {tabs.map((tab) => {
            const { id, title, title2text } = tab;
            return (
              <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@algtyt@${id}`}
                key={id}
                tab={
                  <div
                    title={title2text || title}
                    className={id == activeKey ? `tab2selected wea-f${fontStyle.tab1fontsize || 12}` : `tab2unselected wea-f${fontStyle.tab2fontsize || 12}`}
                    style={style}
                  >
                    {title}
                  </div>
                }
              />
            );
          })}
        </Tabs>
      );

      if (withTitleContainer) {
        return (
          <div id={`titleContainer_${eid}`} className="titlecontainer">
            {_Tabs}
          </div>
        );
      }
        return _Tabs;
    }
      return null;
  }

  onChange = (key) => {
    this.props.onChange(key);
  };
}

export default WeaPortalElementTabs;
